<script setup lang="ts">
import myAuth from "@/composables/myAuth.ts";

const {form, login} = myAuth();
const onSubmit = async () => {
  await login(form);
}
</script>

<template>
  <main class="all">
    <div class="main">
      <div class="image">
        <img src="/images/login.jpg" alt="login"/>
      </div>
      <div class="form">
        <h3>会员登录</h3>
        <div class="inputs">
          <form-input type="text" placeholder="请输入账号" v-model="form.phone" v-clearError="'phone'"/>
          <my-error name="phone" />
          <form-input type="password" class="mt-4" placeholder="请输入密码" v-model="form.password" v-clearError="'password'"/>
          <my-error name="password" />
          <my-captcha class="mt-3"
                      v-model:captcha_code="form.captcha_code"
                      v-model:captcha_key="form.captcha_key"

          />
          <my-error name="captcha_code" />
          <form-button class="btn" @click="onSubmit">
            <icon-me/>
            登录
          </form-button>
          <layout-auth-footer />
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
main.all {
  @apply bg-slate-300 h-screen flex justify-center items-center;
  div.main {
    @apply bg-white w-[720px] grid grid-cols-2 rounded overflow-hidden shadow;
    div.image {
      @apply relative;
      img {
        @apply absolute w-[360px] h-full object-cover;
      }
    }

    div.form {
      @apply px-4 py-6;
      h3 {
        @apply text-gray-700 font-bold text-center;
      }

      div.inputs {
        @apply mt-6 flex flex-col;

        div.error {
          @apply bg-red-300 flex items-center gap-1 text-white text-xs p-1 mt-2 rounded-sm;
        }
      }
    }
  }
}
</style>